<!--  -->
<template>
  <div class="fooddetails container">
    <Breadcrumb />
    <main>
      <div class="content">
        <img
          src="https://img-new.boqiicdn.com/Data/Shop/3/370/37062/shoppicpath11595325735_y.jpg?imageView2/2/w/375/h/375/q/100/interlace/0/format/jpg"
          alt=""
        />
        <div class="pet-info">
          <h1>非卖品【试用装】皇家 小型犬成犬湿粮试用装 85g</h1>
          <ul>
            <li>价格：<span class="price">￥2000.00 </span><span class="promotion">促销价</span></li>
            <li >重量：<span class="wight-min">1kg</span>  &nbsp;&nbsp; <span class="wight-max">2kg</span> </li>
            <li>数量：  <span class="num-sub">-</span><span class="num">1</span><span class="num-add">+</span></li>
            <li>销售量：1333</li>
            <li>快递：<span class="sent">包邮</span> &nbsp;&nbsp;&nbsp;&nbsp; <span class="comment" @click="returnCom">累计评论</span></li>
            
            <!-- <li class="child-li">
              分享:<vshare :vshareConfig="vshareConfig"></vshare>
            </li> -->
            <li class="last-child-li">
              <span class="addCart-btn">加入购物车</span
              ><span class="buy-btn">立即购买</span>
            </li>
          </ul>
        </div>
      </div>
      <Pettitle/>
    </main>
  </div>
</template>

<script>
// 导入面包屑组件
import Breadcrumb from '../components/Breadcrumb'
import Pettitle from '../components/details/Pettitle'
// 引入分享功能的插件
// import vshare from 'vshare'
export default {
  name:'Fooddetails',
  components:{
    Breadcrumb,Pettitle
  },
  data () {
    return {
      radio: 1,
      // 分享功能的配置
        vshareConfig: {
            // 此处放分享列表（ID）
            shareList: ["weixin", "qzone"],
            //此处放置分享按钮设置
            share: [{ bdSize: 24 }],
            //此处放置浮窗分享设置
            slide: false
        },
    };
  },
  // created(){
  //    console.log(this.$route)// 通过打印路由信息可以查看道传过来的id
  // }
  methods:{
    returnCom() {
    const returnEle = document.querySelector("#comment");
    if (returnEle) {
      returnEle.scrollIntoView(true);
    }
  }
  }
  
}

</script>
<style lang='less' scoped>
@import "../assets/css/total.less";
.fooddetails {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  box-sizing: border-box;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      height: 400px;
      width: 300px;
      
      margin: 30px 30px 30px 150px;
    }
  }
  .pet-info {
    background-color: rgb(239, 239, 239);
    height: 450px;
    box-sizing: border-box;
    padding-top: 30px;
    margin-right: 150px;
    h1 {
      text-align: center;
      font-weight: 700;
      font-size: 20px;
      padding: 10px;
    }
    li {
      margin: 30px;
      font-size: 25px;
      .wight-min,.wight-max{
          font-size: 18px;
          color: rgb(255, 255, 255);
          display: inline-block;
          background-color:rgb(255, 157, 0);
          border-radius: 5px;
          padding: 5px;
          cursor: pointer;
          &:hover{
            background-color:rgb(255, 217, 0);
          }
      }

      .price{
        font-weight: bold;
        color: tomato;
      }
      .promotion{
        border-radius: 3px;
        background-color: rgb(255, 157, 0);
        color: white;
        font-size: 15px;
      }
      .num-sub,.num-add{
        cursor: pointer;
        padding: 0 10px;
        border: 1px solid rgb(82, 79, 79);
      }
      .num{
        padding: 0 10px;
        border-top: 1px solid rgb(82, 79, 79);
        border-bottom: 1px solid rgb(82, 79, 79);
      }
      .sent{
          background-color: rgb(255, 38, 0);
          color: white;
          margin: 0 10px;
          padding: 0 5px;
          border-radius: 3px;
          font-size: 25px;
        }
      .comment{
        width: 100px;
        padding: 0 10px;
        color: white;
        cursor: pointer;
        
        border-radius: 8px;
        background-color: rgb(139, 212, 184);
      }
      .addCart-btn {
        display: block;
        width: 170px;
        padding: 10px;
        color: white;
        cursor: pointer;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: rgb(13, 173, 13);
        &:hover {
          background-color: rgb(255, 5, 5);
        }
      }
      .buy-btn {
        display: block;
        width: 170px;
        padding: 10px;
        text-align: center;
        color: rgb(255, 254, 254);
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: rgb(3, 69, 250);
        &:hover {
          background-color: rgb(246, 7, 7);
        }
      }
    }

    .child-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 200px;
    }
    .last-child-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>